<template>
<lay-layer v-model="deviceConfigVisibleFlag" :type="0" :title="'串口参数配置'">
        <lay-form :model="deviceConfig">
            <lay-form-item label="串口:" prop="path">
                <lay-select v-model="deviceConfig.path">
                    <lay-select-option v-for="item in $store.state.devicePortList" :value="item.path">{{ item.path }}</lay-select-option>
                </lay-select>
            </lay-form-item>
            <lay-form-item label="波特率:" prop="baudRate">
                <lay-select v-model="deviceConfig.baudRate">
                    <lay-select-option :value="2400">2400</lay-select-option>
                    <lay-select-option :value="4800">4800</lay-select-option>
                    <lay-select-option :value="9600">9600</lay-select-option>
                    <lay-select-option :value="12800">12800</lay-select-option>
                    <lay-select-option :value="14400">14400</lay-select-option>
                    <lay-select-option :value="19200">19200</lay-select-option>
                    <lay-select-option :value="115200">115200</lay-select-option>
                </lay-select>
            </lay-form-item>
            <lay-form-item label="校验位:" prop="parity">
                <lay-select v-model="deviceConfig.parity">
                    <lay-select-option :value="'none'">无</lay-select-option>
                    <lay-select-option :value="'even'">偶校验</lay-select-option>
                    <lay-select-option :value="'odd'">奇校验</lay-select-option>
                </lay-select>
            </lay-form-item>
            <lay-form-item label="数据位:" prop="dataBits">
                <lay-select v-model="deviceConfig.dataBits">
                    <lay-select-option :value="5">5</lay-select-option>
                    <lay-select-option :value="6">6</lay-select-option>
                    <lay-select-option :value="7">7</lay-select-option>
                    <lay-select-option :value="8">8</lay-select-option>
                </lay-select>
            </lay-form-item>
            <lay-form-item label="停止位:" prop="stopBits">
                <lay-select v-model="deviceConfig.stopBits">
                    <lay-select-option :value="1">1</lay-select-option>
                    <lay-select-option :value="1.5">1.5</lay-select-option>
                    <lay-select-option :value="2">2</lay-select-option>
                </lay-select>
            </lay-form-item>
        </lay-form>

        <template #footer>
            <div style="display: flex; justify-content: right;margin: 8px;">
                <lay-button @click="closeDeviceConfig">取消</lay-button>
                <lay-button type="primary" @click="saveDeviceConfig">保存</lay-button>
            </div>
        </template>
    </lay-layer>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import {useStore} from 'vuex'

const $store = useStore()

const deviceConfigVisibleFlag = ref(false)

const deviceConfig = ref({
    path: 'COM1',
    baudRate: 9600,
    dataBits: 8,
    stopBits: 1,
    parity: 'none',
})

const show = (config) => { 
    deviceConfig.value = {
        ...deviceConfig.value,
        ...config
    }
    deviceConfigVisibleFlag.value = true
}

const saveDeviceConfig = () => {
    deviceConfigVisibleFlag.value = false
}

const closeDeviceConfig = () => {
    deviceConfigVisibleFlag.value = false
}

defineExpose({
    show,
})
</script>